<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-10-31 10:43:44
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-01-29 09:58:30
 * @FilePath: \vue-admin-template\src\views\projectManagement\reviewSheet\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="distribution">
        <el-dialog title="" :visible.sync="showSerInter" width="690px" :before-close="handleClose">
            <div style="text-align: center;">
                <span style="font-size: 20px;color: #3F3F3F;">{{ "附件" }}</span>
                <div style="margin-top: 30px;text-align: center;margin-left: 20px;margin-bottom: 20px;">
                    <el-upload ref="upload" class="upload-demo" 
                        :action="this.$http + '/mold/ledger-file/upload'" 
                       :file-list="fileList" list-type="picture">
                        <div slot="file" slot-scope="{file}">
                            <div class="el-upload-list__item-thumbnail file-list-styles">
                                <span v-if="file.fileType">{{ file.fileType.toUpperCase() }}</span>
                                <span v-if="file.response">{{ file.response.data.fileType.toUpperCase()
                                }}</span>
                            </div>
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-name" style="width:50%">{{ file.name }}</span>
                                <span class="downFile-box" @click="clickDownFile(file)">下载文件</span>

                            </span>
                        </div>
                    </el-upload>
                </div>
            </div>

        </el-dialog>
    </div>
</template>
  
<script>

export default {
    props: {
        showSerInter: {
            type: Boolean
        },
        id: {
            type: [String, Number]
        },
        genre: {
            type: [String, Number]
        },
    },
    data() {
        return {
            fileList: [],
            fullscreenLoading:false
        }
    },
    mounted() {
        this.$baseRequestGetParams('/mold/ledger-file/getList', { ledgerId: this.id, genre: this.genre }, {}, 'get').then(res => {
            this.fileList = res.data.map(item => { // 按插件回显格式再次处理 pdf文件添加自定义封面
                item.name = item.fileName;
                delete item.status;
                return item
            });
        })

    },
    methods: {
        /**
                 * @description: 下载文件
                 * @param {*} file
                 * @return {*}
                 */
        clickDownFile(file) {
            this.fullscreenLoading = true;
            this.methDownFile("get", "/mold/ledger-file/download/" + file.id, {}, file.fileName, file.fileType).then((res) => {
                this.fullscreenLoading = res;
            });
        },
        handleClose(done) {
            this.$emit('closeSerInter')
        },

    }
}
</script>
<style>
.distribution .el-dialog__body {
    padding-top: 15px;
}
</style>
<style lang="scss" scoped>
.downFile-box {
    position: absolute;
    right: 20px;
    top: 35%;
    color: #5CD8DA;
    cursor: pointer;
}

.file-list-styles {
    background-color: #E0EFFC;
    border-radius: 5px;
    text-align: center;
    line-height: 70px;
    font-size: 18px;
}
</style>
  